<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>编辑您的帖子</title>
    <div th:replace="commonPage::comLink"></div>
</head>
<body>
<div th:replace="commonPage::#loader"></div>

<div th:replace="commonPage::comIndexHeaderMune"></div>

<!-- ================================
    START BREADCRUMB AREA
================================= -->


<!-- ================================
    END BREADCRUMB AREA
================================= -->

<!--      发帖     -->
<div class="container-fluid1  padding-bottom-120px padding-top-140px">
    <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 mx-auto"  >
            <h2><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 发起您的问题</h2>
            <hr>
            <form th:action="@{/publish}" method="post" >
                <input hidden="hidden" name="questionID" th:value="${questionID}">
                <div class="form-group">
                    <label for="title"><font color="red"> * </font>问题标题（简单明了） </label>
                    <input type="text" class="form-control" id="title" name="title"
                           placeholder="请输入标题" th:value="${title}">
                </div>
                <label for="title"><font color="red"> * </font>问题详情</label>
                <p><font color="red"> * </font>上传图片时，点击图片可调整大小，合适的大小让人看起来更舒服哦</p>
                <div id="editor"  style="z-index: 0" >
<!--                    onkeyup="getContent()"-->
                    <div th:if="${description}" id="q_des">[[${description}]]</div>
                </div>
                <textarea id="description" name="description"  class="form-control hidden"></textarea>
                <textarea id="simp_des" name="simp_des"  class="form-control hidden"></textarea>
                <div class="form-group">
                    <label for="title"><font color="red"> * </font>添加问题所属类型</label>
                    <br>
                    <select id="tag" name="tag" class="form-control col-lg-4">
                        <option value="all">综 合</option>
                        <option value="inClass">内 科</option>
                        <option value="outClass">外 科</option>
                    </select>
                </div>
                <br>
                <label style="color: red" th:text="${msg}"></label>
                <button type="submit" onclick="getContent()" class="btn btn-info btn-primary btn-right">提交</button>
            </form>
        </div>
        <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 ">
            <h3>发起问题引导</h3>
            <hr>
            <font color="red"> * </font> 问题标题:请用精简的语言描述您发布的问题,不超过25字
            <br><br>
            <font color="red"> * </font> 问题补充:详细补充您的问题内容，并确保问题描述清晰直观，并提供一些相关的资料
            <br><br>
            <font color="red"> * </font> 选择标签:选择一个合适的标签，可以得到更快速准确的回答
            <br><br>
            <font color="red"> * </font> 注意： 带 <font color="red"> * </font> 的内容必须填写
        </div>

    </div>
</div>


<div th:replace="commonPage::comFooter">
</div>
<div th:replace="commonPage::comScript">
</div>
<script type="text/javascript">
    const E = window.wangEditor;
    const editor = new E('#editor');
    editor.config.placeholder = "请输入您的问题";
    editor.config.zIndex = 0;
    editor.config.uploadImgServer = '/img/upload';
    //不上传网络图片
    editor.config.showLinkImg = false
    //图片大小最大为3M
    editor.config.uploadImgMaxSize = 3 * 1024 * 1024;
    // 一次最多上传 5 个图片
    editor.config.uploadImgMaxLength = 5
    editor.config.uploadFileName = 'file';
    editor.config.uploadImgHooks = {
        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function(insertImgFn, result) {
            // result 即服务端返回的接口
            console.log('customInsert', result)
            var url = result.url
            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            insertImgFn(url)
        }
    }



    //显示界面
    editor.config.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        // 'fontName',  // 字体
        // 'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'undo',  // 撤销
        'redo'  // 重复
    ];

    editor.config.fontsizes = {
        // 格式：'value': 'title'
        1: '20px',
    };
    var q_des = $("#q_des").text();
    $("#q_des").html(q_des);

    editor.create()

    var description = $("#description");
    var simp_des = $("#simp_des");
    var html = editor.txt.html();
    var text = editor.txt.text();
    description.html(html);
    simp_des.html(text);
   function getContent() {

       var description = $("#description");
       var simp_des = $("#simp_des");
       var html = editor.txt.html();
       var text = editor.txt.text();
       description.html(html);
       simp_des.html(text);
   }
</script>


</body>
</html>